import { useState } from "react";
import "./index.css";
import {
  SettingOutlined,
  MoreOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  ApiOutlined,
  BulbOutlined,
  WifiOutlined,
  VideoCameraOutlined,
  SoundOutlined,
  PlusCircleFilled,
} from "@ant-design/icons";
import { Switch } from "antd";
import ReactECharts from "echarts-for-react";
import Title from "./components/title";
import Popup from "./components/popup/index.tsx";

function home() {
  let [title, setTitle] = useState("我的家");
  let [wa, setWa] = useState(405.5);
  let [oneData, setOneData] = useState([
    { value: 100, name: "客厅" },
    { value: 735, name: "工作室" },
    { value: 580, name: "卧室" },
    { value: 484, name: "车库" },
    { value: 300, name: "厨房" },
  ]);
  let [threeData, setThreeData] = useState([
    { value: 4, name: "剩余" },
    { value: 6, name: "已限制" },
  ]);
  let [twoData, settwoData] = useState({
    x: ["一", "二", "三", "四", "五", "六", "日"],
    y: [
      {
        value: 100,
        itemStyle: {
          color: "#3e4e6c",
        },
      },
      {
        value: 200,
        itemStyle: {
          color: "#1f8efa",
        },
      },
      {
        value: 300,
        itemStyle: {
          color: "#1f8efa",
        },
      },
      {
        value: 400,
        itemStyle: {
          color: "#1f8efa",
        },
      },
      {
        value: 300,
        itemStyle: {
          color: "#3e4e6c",
        },
      },
      {
        value: 200,
        itemStyle: {
          color: "#1f8efa",
        },
      },
      {
        value: 100,
        itemStyle: {
          color: "#1f8efa",
        },
      },
    ],
  });
  let charts_one = {
    tooltip: {
      trigger: "item",
    },
    //
    legend: {
      itemWidth: 8,
      itemHeight: 8,
      icon: "circle",
      align: "left",
      top: 0,
      right: 0,
      orient: "vertical",
      itemGap: 10,
      padding: [10, 10, 10, 10], //设置图例与圆环图之间的间距
      formatter: function (name: any) {
        //该函数用于设置图例显示后的百分比
        var total = 0;
        var value = 0;
        oneData.forEach((item) => {
          total += item.value;
          if (item.name === name) {
            value = item.value;
          }
        });
        var p = ((value / total) * 100).toFixed(1); //求出百分比,保留2位小数
        // return `${name}  ${value}件  ${p}%`
        return `${name}                  ${p}%`; //返回出图例所显示的内容是名称+百分比
      },
      textStyle: {
        color: "#cccccc",
      },
    },
    graphic: [
      // 设置圆环内文字始终在圆环的正中间
      {
        type: "group",
        left: 80,
        top: "center",
        bounding: "raw",
        children: [
          {
            type: "text",
            style: {
              text: wa,
              fontSize: 30,
              fill: "#fff", //文字的颜色
              textVerticalAlign: "middle",
              textAlign: "center",
              fontWeight: "500",
            },
          },
        ],
      },
      {
        type: "group",
        left: 80,
        top: 100,
        bounding: "raw",
        children: [
          {
            type: "text",
            style: {
              text: "瓦",
              fontSize: 8,
              fill: "#cdd3dd", //文字的颜色
              textVerticalAlign: "middle",
              textAlign: "center",
            },
          },
        ],
      },
    ],
    calculable: true,
    series: [
      {
        type: "pie",
        radius: ["60%", "90%"],
        center: [80, "center"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: oneData,
      },
    ],
  };
  let charts_two = {
    xAxis: {
      type: "category",
      data: twoData.x,
      // show: false,
    },
    grid: {
      // 让图表占满容器
      top: "0px",
      left: "0px",
      right: "0px",
      bottom: "0px",
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        data: twoData.y,
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            //柱形图圆角，初始化效果
            barBorderRadius: [15],
          },
        },
      },
    ],
  };
  let charts_three = {
    tooltip: {
      trigger: "item",
    },
    color: ["#3e4e6c", "#1f8efa"],
    graphic: [
      // 设置圆环内文字始终在圆环的正中间
      {
        type: "group",
        left: "center",
        top: "center",
        bounding: "raw",
        children: [
          {
            type: "text",
            style: {
              text: 10,
              fontSize: 20,
              fill: "#fff", //文字的颜色
              textVerticalAlign: "middle",
              textAlign: "center",
              fontWeight: "500",
            },
          },
        ],
      },
    ],
    calculable: true,
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["70%", "90%"],
        center: ["center", "middle"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        data: threeData,
      },
    ],
  };

  // 统计数据
  let [tongjiData, setTongjiData] = useState([
    { id: 1, title: "客厅", main: 745, danwei: "瓦", icon: ArrowUpOutlined },
    {
      id: 2,
      title: "室外",
      main: `${20}.0`,
      danwei: "摄氏度",
      icon: ArrowUpOutlined,
    },
    {
      id: 3,
      title: "室内",
      main: 15.3,
      danwei: "摄氏度",
      icon: ArrowDownOutlined,
    },
    {
      id: 4,
      title: "水量",
      main: 494,
      danwei: "立方米",
      icon: ArrowUpOutlined,
    },
    {
      id: 5,
      title: "网络",
      main: 45.3,
      danwei: "MBPS",
      icon: ArrowDownOutlined,
    },
  ]);

  // 摄像头数据 and 切换高亮
  let [shexiangtouData, setShexiangtouData] = useState([
    { id: 1, url: "/public/img/微信图片_20230814114200.png", cemera: "c1" },
    { id: 2, url: "/public/img/微信图片_20230814114200.png", cemera: "c2" },
    { id: 3, url: "/public/img/微信图片_20230814114200.png", cemera: "c3" },
    { id: 4, url: "/public/img/微信图片_20230814114200.png", cemera: "c4" },
  ]);
  let [ceId, setCeId] = useState(1);
  function changeCemera(id: number) {
    setCeId(id);
  }
  let [show, setShow] = useState(false);
  function setPopup() {
    setShow(!show);
  }
  function popSub(data: any) {
    console.log(data);
  }
  // 底部数据
  let [footData, setFootData] = useState([
    {
      id: 1,
      icon: ApiOutlined,
      title: "插座",
      time: "2023.02.16",
      check: true,
    },
    {
      id: 2,
      icon: VideoCameraOutlined,
      title: "摄像头",
      time: "2023.02.17",
      check: false,
    },
    {
      id: 3,
      icon: BulbOutlined,
      title: "头灯",
      time: "2023.02.19",
      check: true,
    },
    {
      id: 4,
      icon: WifiOutlined,
      title: "Wifi",
      time: "2023.02.20",
      check: false,
    },
    {
      id: 5,
      icon: ApiOutlined,
      title: "恒温器",
      time: "2023.02.28",
      check: false,
    },
    {
      id: 6,
      icon: SoundOutlined,
      title: "音响",
      time: "2023.02.10",
      check: true,
    },
  ]);
  function changeFootAc(value: boolean, id: number) {
    console.log(value);
    let val = footData.map((item) => {
      if (item.id === id) {
        item.check = !item.check;
      }
      return item;
    });
    setFootData(val);
  }
  return (
    <>
      <Popup
        title="我的家-设置"
        show={show}
        ok={popSub}
        cancel={setPopup}
      ></Popup>
      <div className="home">
        <div className="homeTop">
          <span className="homeTopTitle">{title}</span>
          <SettingOutlined className="icons" onClick={setPopup} />
        </div>
        <div className="homeMiddle">
          <div className="homeMiddleTop">
            <div className="homeMiddleTopLeft">
              <div className="homeMiddleTopLeftTitle">
                <div
                  className="homeMiddleTopLeftTitleLeft"
                  style={{ color: "#cbd1db" }}
                >
                  摄像头
                </div>
                <div className="homeMiddleTopLeftTitleRight">
                  <div className="make">
                    {shexiangtouData.map((item) => {
                      return (
                        <span
                          className={item.id === ceId ? "ceActive" : ""}
                          onClick={() => changeCemera(item.id)}
                          key={item.id}
                        >
                          {item.cemera}
                        </span>
                      );
                    })}
                  </div>
                  <MoreOutlined className="icons" />
                </div>
              </div>
              <div className="homeMiddleTopLeftMain">
                <img
                  src="/public/img/微信图片_20230814114200.png"
                  alt=""
                  className="leftmainimg"
                />
              </div>
            </div>
            <div className="rightMain">
              <div className="echcarts_one">
                <Title title="房间耗电量"></Title>
                <ReactECharts
                  option={charts_one}
                  style={{
                    width: "100%",
                    height: "calc(100% - 40px)",
                    boxSizing: "border-box",
                    padding: "0 20px",
                  }}
                />
              </div>
              <div className="homeMiddleTopRightBottom">
                <div className="echcarts_two">
                  <Title title="按日统计"></Title>
                  <div className="charts_main">
                    <ReactECharts
                      option={charts_two}
                      style={{ height: "100%", width: "100%" }}
                    />
                  </div>
                  <div className="three_bottom">
                    <div className="button">查看更多信息</div>
                  </div>
                </div>
                <div className="echcarts_three">
                  <Title title="设备限制"></Title>
                  <div className="charts_main">
                    <ReactECharts
                      option={charts_three}
                      style={{ height: "100%", width: "100%" }}
                    />
                  </div>
                  <div className="three_bottom">
                    <div className="button">查看更多信息</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="homeMiddleBottom">
            <Title title="按类别统计"></Title>
            <div className="typeMain">
              {tongjiData.map((item) => (
                <div className="typeItem" key={item.id}>
                  <p style={{ fontSize: "12px" }}>{item.title}</p>
                  <div className="typeItemMain">
                    <div className="typeItemMain_title">{item.main}</div>
                    <div className="typeItemMain_danwei">
                      <p>{item.danwei}</p>
                      <item.icon style={{ color: "#657d95" }} />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* foot */}
          <div className="footer">
            <div className="footplus">
              <div className="plusbutton">
                <PlusCircleFilled
                  style={{
                    fontSize: "35px",
                    color: "#1f8efa",
                    backgroundColor: "#fff",
                    borderRadius: "50%",
                  }}
                />
              </div>
            </div>
            <div className="footmain wrapper">
              {footData.map((item) => {
                return (
                  <div
                    key={item.id}
                    className={item.check ? "acfootItem" : "footItem"}
                  >
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        height: "100%",
                      }}
                    >
                      <item.icon className="footItemicon" />
                    </div>
                    <div className="footItemRight">
                      <p className="footItemTitle">{item.title}</p>
                      <div>
                        <p>上次使用</p>
                        <p>{item.time}</p>
                      </div>
                    </div>
                    <Switch
                      size="small"
                      onChange={(value: any) => changeFootAc(value, item.id)}
                      checked={item.check}
                    />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default home
